<template>
  <div class="legend-frame" :style="{ right: floatRight }">
    <div class="legend-header">
      <!-- <div class="tixing" @click="isShow=!isShow"> -->
      <!--        <i :class="[isShow?'el-icon-caret-top' :'el-icon-caret-bottom']" class="iconCaretStyle" />-->
      <!-- <img v-show="isShow" class="sjx" src="../../../assets/map/legend/收起三角.png" alt="">
        <img v-show="!isShow" class="sjx" src="../../../assets/map/legend/展开三角.png" alt="">
      </div>  -->
      <div @click="isShow = !isShow" v-show="!isShow" class="tixiNew">
      </div>
    </div>
    <div v-show="isShow" class="legend-body">
      <div class="tixing" @click="isShow = !isShow">
      </div>
      <slot />
    </div>
  </div>
</template>

<script>
import { Loading } from 'element-ui'

export default {
  name: 'WarpVue',
  computed: {
    mapLoadingText() {
      return this.$store.getters.mapLoadingText
    },
    RightYuyan() {
      return this.$store.getters.pageState.RightYuyan
    },
    pageState() {
      return this.$store.getters.pageState
    },
    SceneMode() {
      return this.$store.getters.SceneMode
    },
    Isyuyanyagl() {
      return this.$store.getters.Isyuyanyagl
    },

  },
  watch: {
    // rightFold 右边是否展开
    RightYuyan: {
      immediate: true,
      handler: function (val, oldVal) {
        console.log(this.$store.getters.pageState.RightYuyan);
        this.floatRight = this.$store.getters.pageState.RightYuyan
      }
    },
  },
  data() {
    return {
      floatRight: '30%',
      isShow: true
    }
  }
}
</script>

<style scoped lang="less">
@import "./legend.less";
</style>
